<template>
  <el-container>
    <el-aside width="220px">
      <el-tree ref="category" class="menu" node-key="label" :data="category" :default-expanded-keys="['系统日志']"
               current-node-key="系统日志" :highlight-current="true" :expand-on-click-node="false"
               @node-click="handleCategoryClick">
      </el-tree>
    </el-aside>
    <el-container>
      <el-main class="nopadding">
        <el-header>
          <div class="left-panel">
            <h2>{{ model }}</h2>
          </div>
          <div class="right-panel">
            <jcx-table-bar v-if="model === '系统日志'" v-model:showSearch="showSearch" @queryTable="getList"
                           :columns="columns"></jcx-table-bar>
            <jcx-table-bar v-if="model === '登录日志'" v-model:showSearch="showSearch" @queryTable="getList"
                           :columns="columns2"></jcx-table-bar>
          </div>
        </el-header>
        <el-main>
          <div v-if="model === '系统日志'">
            <el-form :model="queryParams" ref="queryForm" size="default" :inline="true" v-show="showSearch"
                     label-width="68px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="状态" prop="status">
                    <el-select v-model="queryParams.status" placeholder="状态" clearable>
                      <el-option key="1" label="成功" :value="true"/>
                      <el-option key="0" label="失败" :value="false"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <el-table ref="table" v-loading="loading" :data="logList" row-key="logId"
                      :stripe="config.stripe" :border="config.border" :size="config.size" style="width: 100%">
              <el-table-column label="日志编号" align="center" prop="logNo" v-if="columns[0].visible"></el-table-column>
              <el-table-column label="业务类型" align="center" prop="serviceType"
                               v-if="columns[1].visible"></el-table-column>
              <el-table-column label="操作类型" align="center" prop="operatorType"
                               v-if="columns[2].visible"></el-table-column>
              <el-table-column label="请求方式" align="center" prop="httpMethod"
                               v-if="columns[3].visible"></el-table-column>
              <el-table-column label="请求模块" align="center" prop="model" v-if="columns[4].visible"></el-table-column>
              <el-table-column label="请求方法" align="center" prop="method" v-if="columns[5].visible"></el-table-column>
              <el-table-column label="租户名称" align="center" prop="tenantName"
                               v-if="columns[6].visible"></el-table-column>
              <el-table-column label="用户昵称" align="center" prop="nickName" v-if="columns[7].visible"></el-table-column>
              <el-table-column label="状态" align="center" prop="status" v-if="columns[8].visible">
                <template #default="scope">
                  <el-tag v-if="scope.row.status" type="success">成功</el-tag>
                  <el-tag v-if="!scope.row.status" type="danger">失败</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" align="center" prop="createTime"
                               v-if="columns[9].visible"></el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="props">
                  <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      @click="handleShow(props.row)"
                  >详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <jcx-page
                v-show="total>0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
            ></jcx-page>
          </div>

          <div v-if="model === '登录日志'">
            <el-form :model="queryParams2" ref="queryForm" size="default" :inline="true" v-show="showSearch"
                     label-width="68px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="状态" prop="status">
                    <el-select v-model="queryParams2.status" placeholder="状态" clearable>
                      <el-option key="1" label="成功" :value="true"/>
                      <el-option key="0" label="失败" :value="false"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <el-table ref="table" v-loading="loading" :data="loginList" row-key="loginId"
                      :stripe="config.stripe" :border="config.border" :size="config.size" style="width: 100%">
              <el-table-column label="登录日志编号" align="center" prop="loginNo"
                               v-if="columns2[0].visible"></el-table-column>
              <el-table-column label="用户名" align="center" prop="userName" v-if="columns2[1].visible"></el-table-column>
              <el-table-column label="登录IP" align="center" prop="ip" v-if="columns2[2].visible"></el-table-column>
              <el-table-column label="登录地点" align="center" prop="location" v-if="columns2[3].visible"></el-table-column>
              <el-table-column label="浏览器类型" align="center" prop="browser" v-if="columns2[4].visible"></el-table-column>
              <el-table-column label="操作系统" align="center" prop="os" v-if="columns2[5].visible"></el-table-column>
              <el-table-column label="提示消息" align="center" prop="msg" v-if="columns2[6].visible"></el-table-column>
              <el-table-column label="状态" align="center" prop="status" v-if="columns2[7].visible">
                <template #default="scope">
                  <el-tag v-if="scope.row.status" type="success">成功</el-tag>
                  <el-tag v-if="!scope.row.status" type="danger">失败</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" align="center" prop="createTime"
                               v-if="columns2[8].visible"></el-table-column>
              <el-table-column label="备注" align="center" prop="remark" v-if="columns2[9].visible"></el-table-column>
            </el-table>

            <jcx-page
                v-show="total2>0"
                :total="total2"
                v-model:page="queryParams2.pageNum"
                v-model:limit="queryParams2.pageSize"
                @pagination="getList"
            ></jcx-page>
          </div>
        </el-main>
      </el-main>
    </el-container>
  </el-container>

  <el-drawer v-model="drawer" title="日志详情" :size="900" destroy-on-close @close="cancel">
    <el-main style="padding:0 20px;">
      <el-descriptions :column="1" border size="small">
        <el-descriptions-item label="请求接口">{{ form.url }}</el-descriptions-item>
        <el-descriptions-item label="请求方法">{{ form.method }}</el-descriptions-item>
        <el-descriptions-item label="请求人IP">{{ form.ip }}</el-descriptions-item>
        <el-descriptions-item label="IP归属地">{{ form.location }}</el-descriptions-item>
        <el-descriptions-item label="请求状态">
          <el-tag v-if="form.status" type="success">成功</el-tag>
          <el-tag v-if="!form.status" type="danger">失败</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="请求时间">{{ form.createTime }}</el-descriptions-item>
      </el-descriptions>
      <el-collapse style="margin-top: 20px;">
        <el-collapse-item v-if="form.param && $TOOL.formatJson(form.param)" title="请求参数" name="1">
          <pre class="code" v-html="$TOOL.formatJson(form.param)"></pre>
        </el-collapse-item>
        <el-collapse-item v-if="form.result && form.result !== '0' && $TOOL.formatJson(form.result)" title="请求返回值"
                          name="2">
          <pre class="code" v-html="$TOOL.formatJson(form.result)"></pre>
        </el-collapse-item>
        <el-collapse-item v-if="form.exception && form.exception !== '0'"
                          title="请求异常信息" name="2">
          <div class="code">
            {{ form.exception }}
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-main>
  </el-drawer>
</template>

<script>
module.exports = {
  name: "Log",
  data() {
    return {
      model: '系统日志',
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      drawer: false,
      category: [
        {
          label: '系统日志',
          children: [
            {label: 'POST'},
            {label: 'DELETE'},
            {label: 'PUT'},
            {label: 'GET'}
          ]
        },
        {
          label: '登录日志'
        }
      ],
      // 日志列表数据
      logList: [],
      loginList: [],
      // 分页总条数
      total: 0,
      total2: 0,
      // 查询参数
      queryParams: {
        status: undefined,
        httpMethod: undefined,
        pageNum: 1,
        pageSize: 10
      },
      // 查询参数
      queryParams2: {
        status: undefined,
        pageNum: 1,
        pageSize: 10
      },
      form: {},
      // 表格配置
      config: {
        // 表格大小
        size: "default",
        // 表格边框
        border: true,
        // 表格斑马图纹
        stripe: true
      },
      columns: [
        {key: 0, label: `日志编号`, visible: true},
        {key: 1, label: `业务类型`, visible: true},
        {key: 2, label: `操作类型`, visible: true},
        {key: 3, label: `请求方式`, visible: true},
        {key: 4, label: `请求模块`, visible: true},
        {key: 5, label: `请求方法`, visible: true},
        {key: 6, label: `租户名称`, visible: true},
        {key: 7, label: `用户昵称`, visible: true},
        {key: 8, label: `状态`, visible: true},
        {key: 9, label: `创建时间`, visible: false},
      ],
      columns2: [
        {key: 0, label: `登录日志编号`, visible: true},
        {key: 1, label: `用户名`, visible: true},
        {key: 2, label: `登录IP`, visible: true},
        {key: 3, label: `登录地点`, visible: true},
        {key: 4, label: `浏览器类型`, visible: true},
        {key: 5, label: `操作系统`, visible: true},
        {key: 6, label: `提示消息`, visible: true},
        {key: 7, label: `状态`, visible: true},
        {key: 8, label: `创建时间`, visible: false},
        {key: 9, label: `备注`, visible: true},
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleCategoryClick(data) {
      if (data.label === '登录日志') {
        this.model = '登录日志';
      } else {
        this.model = '系统日志';
        if (data.label === '系统日志') {
          this.queryParams.httpMethod = undefined
        } else {
          this.queryParams.httpMethod = data.label
        }
      }
      this.getList()
    },
    /** 查询部门列表 */
    getList() {
      this.loading = true;
      if (this.model === '系统日志') {
        this.$API.log.pageListLog.get(this.queryParams).then(response => {
          if (response.status) {
            this.logList = response.data.records
            this.total = response.data.total
          } else {
            this.$message.warning(response.msg);
          }
          this.loading = false;
        })
      } else {
        this.$API.log.pageListLogin.get(this.queryParams2).then(response => {
          if (response.status) {
            this.loginList = response.data.records
            this.total2 = response.data.total
          } else {
            this.$message.warning(response.msg);
          }
          this.loading = false;
        })
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.httpMethod = undefined
      this.$refs["queryForm"].resetFields();
      this.handleQuery();
    },
    cancel() {
      this.form = {}
    },
    handleShow(data) {
      this.form = {}
      this.$API.log.getLogById.get(data.logId).then(response => {
        if (response.status) {
          this.form = response.data
          this.drawer = true
        } else {
          this.$message.warning(response.msg);
        }
      })
    }
  }
};
</script>
<style scoped>
.code {
  background: #848484;
  padding: 15px;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
}
</style>
